<template>
  <view class="profile-container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="header-left">
        <view class="header-icon">👤</view>
        <text class="header-title">个人中心</text>
      </view>
      <view class="close-btn" @click="closePage">✕</view>
    </view>
    <view class="header-subtitle-container">
      <text class="header-subtitle">管理您的个人信息、设置和偏好</text>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <view class="avatar-section">
          <view class="avatar">
            <image src="/static/logo.png" class="avatar-img" />
            <view class="camera-icon">📷</view>
          </view>
        </view>
                <view class="user-details">
          <view class="user-name-section">
            <text class="user-name">张小明</text>
            <view class="verified-badge">已认证</view>
          </view>
          <view class="user-role">连锁店铺身份</view>
          <view class="user-info-row">
            <text class="user-email">📧 user@example.com</text>
            <text class="user-register">📅 注册于 2023-08</text>
          </view>
        </view>
        <view class="edit-icon" @click="editProfile">✏️</view>
      </view>

                           <!-- 用户统计 -->
        <view class="user-stats">
          <view class="stat-card">
            <text class="stat-number">156</text>
            <text class="stat-label">注册天数</text>
          </view>
          <view class="stat-card">
            <text class="stat-number">89</text>
            <text class="stat-label">活跃度</text>
          </view>
          <view class="stat-card">
            <text class="stat-number">Lv.5</text>
            <text class="stat-label">等级</text>
          </view>
        </view>

                 <!-- 最近成就 -->
         <view class="achievements-section">
           <text class="section-title">最近成就</text>
           <view class="achievements-list">
                           <view class="achievement-item active">
                <uni-icons type="star-filled" size="16" color="#ffdf20" class="achievement-icon"></uni-icons>
                <text class="achievement-text">新手入门</text>
              </view>
              <view class="achievement-item active">
                <uni-icons type="person-filled" size="16" color="#ffdf20" class="achievement-icon"></uni-icons>
                <text class="achievement-text">活跃用户</text>
              </view>
              <view class="achievement-item inactive">
                <uni-icons type="chat-filled" size="16" color="#a0a0a0" class="achievement-icon"></uni-icons>
                <text class="achievement-text">社交达人</text>
              </view>
           </view>
         </view>
     </view>

    <!-- 设置列表 -->
    <view class="settings-list">
      <view class="setting-item" @click="navigateToSetting('profile')">
        <view class="setting-icon">👤</view>
        <view class="setting-content">
          <text class="setting-title">个人资料</text>
          <text class="setting-desc">编辑个人信息和头像</text>
        </view>
      </view>

      <view class="setting-item" @click="navigateToSetting('theme')">
        <view class="setting-icon">🎨</view>
        <view class="setting-content">
          <text class="setting-title">主题设置</text>
          <text class="setting-desc">自定义界面主题和风格</text>
        </view>
      </view>

      <view class="setting-item" @click="navigateToSetting('system')">
        <view class="setting-icon">⚙️</view>
        <view class="setting-content">
          <text class="setting-title">系统设置</text>
          <text class="setting-desc">隐私、通知和偏好设置</text>
        </view>
      </view>

      <view class="setting-item" @click="navigateToSetting('notification')">
        <view class="setting-icon">🔔</view>
        <view class="setting-content">
          <text class="setting-title">消息通知</text>
          <text class="setting-desc">管理消息和通知偏好</text>
        </view>
      </view>

      <view class="setting-item" @click="navigateToSetting('security')">
        <view class="setting-icon">🛡️</view>
        <view class="setting-content">
          <text class="setting-title">安全中心</text>
          <text class="setting-desc">密码、隐私和安全设置</text>
        </view>
      </view>

      <view class="setting-item" @click="navigateToSetting('help')">
        <view class="setting-icon">❓</view>
        <view class="setting-content">
          <text class="setting-title">帮助支持</text>
          <text class="setting-desc">使用指南和客服支持</text>
        </view>
      </view>

             <view class="setting-item" @click="navigateToSetting('about')">
         <view class="setting-icon">📄</view>
         <view class="setting-content">
           <text class="setting-title">关于我们</text>
           <text class="setting-desc">版本信息和使用条款</text>
         </view>
       </view>
     </view>

     <!-- 退出登录按钮 -->
     <view class="logout-section">
       <view class="logout-btn" @click="logout">
         <uni-icons type="logout" size="20" color="#FF5757" class="logout-icon"></uni-icons>
         <text class="logout-text">退出登录</text>
       </view>
     </view>
  </view>
</template>

<script>
export default {
  name: 'Profile',
  data() {
    return {
      userInfo: {
        name: '张小明',
        email: 'user@example.com',
        registerDate: '2023-08',
        role: '连锁店铺身份',
        stats: {
          days: 156,
          activity: 89,
          level: 'Lv.5'
        }
      }
    }
  },
  methods: {
    closePage() {
      uni.navigateBack()
    },
    editProfile() {
      uni.showToast({
        title: '编辑个人资料',
        icon: 'none'
      })
    },
         navigateToSetting(type) {
       uni.showToast({
         title: `跳转到${type}设置`,
         icon: 'none'
       })
     },
     logout() {
       uni.showModal({
         title: '确认退出',
         content: '确定要退出登录吗？',
         success: (res) => {
           if (res.confirm) {
             // 清除登录状态
             uni.removeStorageSync('token')
             uni.removeStorageSync('userInfo')
             
             // 跳转到登录页
             uni.reLaunch({
               url: '/pages/login/login'
             })
           }
         }
       })
     }
  }
}
</script>

<style scoped>
.profile-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 45rpx;
  color: #ffffff;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 0 0 0;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
}

.header-subtitle-container {
  display: flex;
  justify-content: center;
  margin-top: 16rpx;
  margin-bottom: 40rpx;
}

.header-subtitle {
  font-size: 24rpx;
  color: #a0a0a0;
  text-align: center;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #ffffff;
}

/* 用户信息卡片 */
.user-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.user-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40rpx;
}

.avatar-section {
  margin-right: 30rpx;
}

.avatar {
  position: relative;
  width: 120rpx;
  height: 120rpx;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #4a4a4a;
}

.camera-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background: #4CAF50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}

.user-details {
  flex: 1;
}

.user-name-section {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  margin-right: 16rpx;
}

.verified-badge {
  background: #4CAF50;
  color: #ffffff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.user-role {
  font-size: 26rpx;
  color: #a0a0a0;
  margin-bottom: 8rpx;
}

.user-info-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 6rpx;
}

.user-email, .user-register {
  font-size: 20rpx;
  color: #a0a0a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.edit-icon {
  font-size: 32rpx;
  color: #a0a0a0;
  padding: 10rpx;
}

/* 用户统计 */
.user-stats {
  display: flex;
  justify-content: space-between;
  gap: 16rpx;
}

.stat-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  padding: 24rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.stat-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 22rpx;
  color: #a0a0a0;
}

/* 成就区域 */
.achievements-section {
  margin-top: 40rpx;
}

.section-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20rpx;
  display: block;
}

.achievements-list {
  display: flex;
  gap: 0;
}

.achievement-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 30rpx;
  padding: 4rpx 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  height: 30rpx;
  margin-right: 12rpx;
  white-space: nowrap;
}

.achievement-item.active {
  background: #503f23;
  border-color: #503f24;
}

.achievement-item.inactive {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.achievement-icon {
  font-size: 20rpx;
  margin-right: 8rpx;
  color: #ffffff;
}

.achievement-text {
  font-size: 18rpx;
  color: #a0a0a0;
  text-align: center;
}

.achievement-item.active .achievement-text {
  color: #ffdf20;
}

.achievement-item.active .achievement-icon {
  color: #ffdf20 !important;
}

.achievement-item.inactive .achievement-icon {
  color: #a0a0a0 !important;
}

/* 设置列表 */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.setting-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24rpx;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.setting-icon {
  font-size: 36rpx;
  margin-right: 24rpx;
  width: 60rpx;
  text-align: center;
}

.setting-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.setting-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 6rpx;
}

.setting-desc {
  font-size: 24rpx;
  color: #a0a0a0;
}

 .setting-arrow {
   font-size: 28rpx;
   color: #a0a0a0;
   margin-left: 20rpx;
 }

 /* 退出登录按钮 */
 .logout-section {
   margin-top: 40rpx;
   padding: 0 20rpx;
 }

 .logout-btn {
   background: #2C2C34;
   border-radius: 24rpx;
   padding: 20rpx 30rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1rpx solid rgba(255, 87, 87, 0.3);
   backdrop-filter: blur(10rpx);
 }

 .logout-icon {
   margin-right: 12rpx;
 }

 .logout-text {
   font-size: 28rpx;
   font-weight: bold;
   color: #FF5757;
 }

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
  /* .profile-container {
    padding: 16rpx;
  }
  
  .user-card {
    padding: 30rpx;
  } */
}
</style>
